<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: #fff00f;
        }
        div{
            color: yellow;
        }
        .red{
            color: red;
        }
        /* 样式的冲突
            - 当不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时
              此时就发生了样式冲突 

            发生样式冲突 由选择器的 -权重- 决定

            选择器的权重
                内联样式（行内       1,0,0,0
                id选择器            0,1,0,0
                类和伪类选择器       0,0,1,0
                元素选择器           0,0,0,1
                通配选择去*           0,0,0,0
                继承的样式           没有优先级
            
            比较优先级 先相加计算（分组选择器单独计算）
                                div,p,span{} 单独计算
            
            如果优先级相同 - 优先使用靠下的样式

            可以在某个样式的后边添加 !important 获得最高优先级 比内联还高
                注意 - 慎用


         */
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div</div>
</body>
</html>